<template>
	<div>
		<div class="crd10">
				<div class="crd10_1">
					<p>呼叫中心</p>
					<span>国际呼叫中心</span>
					<br>
					<span>当地呼叫中心</span>
				</div>
				<div class="crd10_2">
					<p>下载</p>
					<van-image
					class="a1"
					width="80"
					height="50"
					:src="require('@/assets/img/wb.jpeg')"
					/>
					<van-image
					class="a2"
					width="80"
					height="50"
					:src="require('@/assets/img/wx.jpeg')"
					/>
				</div>
				<div class="crd10_3">
					<p>关注我们</p>
					<p>隐私政策</p>
					<p>Cookie政策</p>
				</div>
				<div class="crd10_4">
					<p>关注我们a</p>
					<van-icon class="a1" name="wechat" color="#fff" />
					<van-icon class="a2" name="wechat" color="#fff" />
					<van-icon class="a3" name="wechat" color="#fff" />
					<van-icon class="a4" name="wechat" color="#fff" />
				</div>
				<div class="crd10_5">
					<p>版权所有</p>
					<van-icon 
					v-show="showBtn"
					@click="backTop"
					class="a1" name="arrow-up" color="#CC6600" />
				</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Image as VanImage } from 'vant';
	Vue.use(VanImage);
	export default {
		data() {
    		return {
      			currentPage: 1,
				activeNames: ['1'],
				show: false,
				showBtn:false
    		};
  		},
		methods: {
    			showPopup() {
      			this.show = true;
    			},
				showbtn() {
					let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
					if (scrollTop > 1000) {
						this.showBtn = true;
					} else {
						this.showBtn = false;
					}
        		},
				backTop() {
					var timer = setInterval(function () {
						let osTop = document.documentElement.scrollTop || document.body.scrollTop;
						let ispeed = Math.floor(-osTop / 5);
						document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
						this.isTop = true;
						if (osTop === 0) { clearInterval(timer) }
					}, 80);
				}
  		},
		mounted() {
				window.addEventListener("scroll", this.showbtn, true)
		},
	}
</script>

<style lang="scss" scoped>
	.crd10 {
			width: 100%;
			height: 760px;
			background-color: #CC6600;
			margin-top: 30px;
			>.crd10_1{
				width: 350px;
				height: 120px;
				padding-top: 30px;
				// background-color: blue;
				border-bottom: 1px solid #fff;
				// border-bottom-color: #fff;
				margin: auto;
				>p {
					font-size: 18px;
					display: flex;
					color: #fff;
				}
				>span {
					font-size: 13px;
					float: left;
					color: #fff;
				}
			}
			.crd10_2{
				width: 350px;
				height: 120px;
				padding-top: 30px;
				border-bottom: 1px solid #fff;
				margin: auto;
				>p{
					display: flex;
					color: #fff;
					font-size: 18px;
				}
				>.a1{
					// display: flex;
					float: left;
				}
				>.a2 {
					// display: flex;
					float: right;
					margin-left: 10px;
				}
			}
			.crd10_3{
				width: 350px;
				height: 120px;
				padding-top: 30px;
				border-bottom: 1px solid #fff;
				margin: auto;
				>p{
					color: #fff;
					display: flex;
					font-size: 13px;
				}
			}
			.crd10_4{
				width: 350px;
				height: 120px;
				padding-top: 30px;
				border-bottom: 1px solid #fff;
				margin: auto;
				>p{
					color: #fff;
					display: flex;
				}
				>.a1 {
					float: left;
					display: flex;
					padding-top: 20px;
				}
				>.a2{
					display: flex;
					float: left;
					padding-top: 20px;
					margin-left: 100px;
				}
				>.a3{
					display: flex;
					float: left;
					padding-top: 20px;
					margin-left: 100px;
				}
				>.a4{
					display: flex;
					padding-top: 20px;
					float: right;
				}
			}
			.crd10_5{
				width: 350px;
				height: 120px;
				padding-top: 30px;
				border-bottom: 1px solid #fff;
				margin: auto;
				>p{
					display: flex;
					color: #fff;
					font-size: 13px;
					width: 60px;
					margin-top: 20px;
				}
				.a1{
					display: flex;
					float: right;
					background-color: #fff;
					padding: 10px;
					border-radius: 50%;
					margin-top: -30px;
				}
			}
		}
</style>